import React, { useEffect, useState } from 'react'
import { getQuestionsApi } from '@/Api'
import GoBack from '@/components/GoBack'
import Select from '@/components/Practice/Select'
import './practice.less'
import Question from '../../components/Practice/question'
import EventNoteIcon from '@material-ui/icons/EventNote';

export default function Practice(props) {
    const state = JSON.parse(localStorage.getItem('prstate'))
    const [data, setData] = useState([])
    const [step, setStep] = useState(0)

    useEffect(() => {
        const { testNum, testType, actionCode, questionType } = state
        getQuestionsApi({
            testNum,
            testType,
            actionCode,
            questionType
        }).then(res => {
            const { data } = res
            setData(data)
            setStep(100 / res.data.length)
        }).catch(err => {
            console.log(err);
        })
    }, [])// eslint-disable-line react-hooks/exhaustive-deps
    // 滑动的思路：
    // 在 touchstart 的时候，得到一个点的x
    // 在 touchmove 的时候，记录最终点
    // 在 touchend 的时候，做样式的变化(位置)
    let startX = 0, endX = 0
    const [curIndex, setCurIndex] = useState(0)
    const touchStartHandle = (e) => {
        // 记录起始点
        startX = e.touches[0].clientX
    }
    const touchMoveHandle = (e) => {
        // 记录结束点
        endX = e.touches[0].clientX
    }
    const touchEndHandle = () => {
        // 判断划动是否超出一定的距离
        if (Math.abs(endX - startX) < 100) return
        // 动起来
        let temp = 0
        if (endX > startX) {
            temp = curIndex - 1 <= 0 ? 0 : curIndex - 1 // 最小判断
            setCurIndex(temp)
        } else {
            temp = curIndex + 1 >= data.length - 1 ? data.length - 1 : curIndex + 1 // 最大判断
            setCurIndex(temp)
        }
        // 把startX和endX重置
        startX = endX = 0
    }
    return (
        <div className="practice" onTouchStart={touchStartHandle} onTouchEnd={touchEndHandle} onTouchMove={touchMoveHandle}>
            <div className="pra-header">
                <EventNoteIcon />
                <span>{curIndex + 1} / {data.length}</span>
            </div>
            <div className="list-container">
                <div className="test-list" style={{ width: 100 * data.length + '%', transform: `translateX(${curIndex * step * -1}%)` }}>
                    {
                        data.map(item => {
                            return <div key={item.id} style={{ width: 100 * data.length + '%' }}>
                                {
                                    (() => {
                                        if (item.questionType === 'one' || item.questionType === 'check' || item.questionType === 'many') {
                                            return <Select data={item} actionCode={state.actionCode}></Select>
                                        } else {
                                            return <Question data={item} actionCode={state.actionCode}></Question>
                                        }
                                    })()
                                }
                            </div>
                        })
                    }
                </div>
            </div>
            <GoBack></GoBack>
        </div>
    )
}
